<template>
	<view class="content">
		<view class="section section-2">
			<view class="table-container">
				<table border="0" cellspacing="0" cellpadding="0" style="width: 300px">
					<tr>
						<th style="width: 200px" v-for="value in curChartsTab.map" :key="value.index">
							{{ value.name }}
						</th>
					</tr>
					<tr v-for="item in listMap[curChartsTab.type]" :key="item.index">
						<td v-for="(value, key) in curChartsTab.map" :key="value.index">
							{{ item[key] == '' ? '/' : value.filter(item[key]) }}
						</td>
					</tr>
				</table>
			</view>
		</view>
	</view>
</template>

<script>
const nodeMap = {
	sg_name: {
		name: '项目',
		filter: val => val
	},
	start_time: {
		name: '开始时间',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	end_time: {
		name: '结束时间',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	work_time: {
		name: '工期',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	zrr_name: {
		name: '责任人',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	phr_name: {
		name: '配合单位及配合要求',
		filter: val => val
	}
}

import { getListDataApi } from '@/api/project.js'
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			id: 0,
			showAction: true,
			statusBarHeight: 0,
			curChartsTab: {
				name: '关键节点',
				type: 'node',
				map: nodeMap
			},
			listMap: {
				node: []
			}
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		async getTable() {
			uni.showLoading({
				title: '加载中...'
			})
			const { data: node } = await getListDataApi({
				project_id: this.id
			})
			this.listMap.node = node.data.data || []
			for (var i = 0; i < this.listMap.node.length; i++) {
				if (this.listMap.node[i].end_time != null) {
					this.listMap.node[i].end_time = this.listMap.node[i].end_time.substring(0, 10)
				}
				if (this.listMap.node[i].start_time != null) {
					this.listMap.node[i].start_time = this.listMap.node[i].start_time.substring(0, 10)
				}
			}
			uni.hideLoading()
		}
	},
	onLoad() {
		this.id = this.curProject.id
	},
	onReady() {
		this.getTable()
	}
}
</script>

<style lang="scss" scoped>
.check {
	box-sizing: border-box;
	border-radius: 50%;
	width: 42rpx;
	height: 42rpx;
	text-align: center;
	line-height: 42rpx;
	background-color: #d8d8d5;

	.iconfont {
		font-size: 24rpx;
		color: #fff;
		display: none;
	}
}

.check__on {
	background-color: #2e5efe;

	.iconfont {
		display: block;
	}
}

.section-2 {
	width: 100%;

	.table-container {
		width: 100%;
		box-sizing: border-box;
		// padding: 0 40rpx;
		padding-top: 25rpx;
		overflow-x: auto;

		table {
			table-layout: fixed;
			border-top: 1rpx solid #ebebeb;
			border-left: 1rpx solid #ebebeb;

			th {
				font-size: 26rpx;
				color: #3b3c40;
				text-align: left;
				word-break: keep-all;
				white-space: nowrap;
				background-color: #e2eefe;
				padding: 30rpx 0rpx;
				text-align: center;
				border-bottom: 1rpx solid #ebebeb;
				border-right: 1rpx solid #ebebeb;
			}
			// tr {
			// 	th {
			// 		&:nth-child(1) {
			// 			position: sticky;
			// 			left: 0;
			// 			top: 0;
			// 			z-index: 15;
			// 		}
			// 	}
			// 	td {
			// 		&:nth-child(1) {
			// 			position: sticky;
			// 			left: 0;
			// 			z-index: 10;
			// 		}
			// 	}
			// }
			td {
				font-size: 22rpx;
				// white-space: pre-line;  //合并空白符序列，但是保留换行符
				// word-wrap: break-word; //在长单词或+URL+地址内部进行换行
				// word-break: break-all; //允许在单词内换行
				// word-break: keep-all;
				// white-space: nowrap;
				text-align: left;
				padding-right: 20rpx;
				padding: 20rpx ;
				border-bottom: 1rpx solid #ebebeb;
				border-right: 1rpx solid #ebebeb;
				text-align: center;
			}
		}
	}
}

.section-1 {
	width: 100%;
	box-sizing: border-box;
	padding: 40rpx;
	padding-top: 45rpx;
	padding-bottom: 0;

	.item {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 35rpx;
		@include common-box-shadow;
		box-sizing: border-box;
		padding: 0 40rpx;

		.left {
			float: left;
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 100rpx;
			letter-spacing: 0rpx;
			color: #1534ce;
		}

		.right {
			float: right;
			font-weight: normal;
			font-stretch: normal;
			line-height: 100rpx;
			letter-spacing: 0rpx;
			color: #1534ce;

			text {
				font-size: 30rpx;
				margin-left: 30rpx;
			}
		}
	}
}

.section-0 {
	width: 100%;
	background-color: #3a5df5;

	.section-body {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-top: 18rpx;

		.top-tab {
			width: 100%;
			height: 52rpx;
			line-height: 52rpx;
			display: flex;
			justify-content: space-between;

			border-bottom: solid 3rpx #f2f2f0;

			.item {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 50rpx;
				letter-spacing: 0rpx;
				color: #d8d8d5;
				position: relative;

				.shape {
					opacity: 0;
					transform: translateY(6rpx);
					position: absolute;
					bottom: -6rpx;
					width: 100%;
					height: 8rpx;
					background-color: #1534ce;
					border-radius: 8rpx;
					transition: 0.3s ease;
				}
			}

			.item__active {
				color: #3b3c40;

				.shape {
					opacity: 1;
					transform: translateY(0rpx);
				}
			}
		}
	}
}

.section-3 {
	@extend .section-0;
	position: fixed;
	left: 0;
	z-index: 50;
	top: 0;
	background: #3a5df5;
	width: 100%;
	height: 100vh;

	.section-body {
		height: 100vh;

		.list {
			@include clear();
			width: 100%;
			padding-top: 40rpx;
			padding-bottom: 80rpx;

			.item {
				width: 327rpx;
				height: 100rpx;
				float: left;
				background-color: #ffffff;
				border-radius: 35rpx;
				@include common-box-shadow;
				box-sizing: border-box;
				padding: 0 40rpx;
				padding-right: 20rpx;
				margin-bottom: 24rpx;
				margin-right: calc(100% - 327rpx * 2);

				&:nth-child(even) {
					margin-right: 0;
				}

				.left {
					float: left;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 100rpx;
					letter-spacing: 0rpx;
					color: #45464a;
				}

				.right {
					float: right;
					font-weight: normal;
					font-stretch: normal;
					line-height: 100rpx;
					letter-spacing: 0rpx;
					color: #1534ce;

					text {
						font-size: 30rpx;
						margin-left: 30rpx;
					}

					.check {
						margin-top: 29rpx;
					}
				}
			}
		}
	}
}
</style>
